<script setup lang='ts'>
import { onMounted, ref, reactive, markRaw } from 'vue'
import { imgBaseURL } from '../../api/baseURL'
import http from '../../api/http'
import type { IUsers } from '../../types/users'
import { Timer, Check, Close, Delete } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import type { TableInstance } from 'element-plus'

const tableData: IUsers[] = reactive([])

const page = ref(1)
const size = ref(5)
const total = ref(0)

const likename = ref('')

//查询用户数据
const getUsers = () => {
    http.getList<IUsers>('Users/vippage', { page: page.value, size: size.value, name: likename.value })
        .then(res => {
            tableData.length = 0
            total.value = res.count
            tableData.push(...res.data)
        }).catch(err => {
            console.log('err: ', err);

        })
}

const handleSizeChange = (val: number) => {
    size.value = val
    getUsers()
}
const handleCurrentChange = (val: number) => {
    page.value = val
    getUsers()
}







//#region 组件初始化
onMounted(() => {
    getUsers();
})
//#endregion


const tableLayout = ref<TableInstance['tableLayout']>('fixed')
</script>


<template>
    <el-card shadow="always" :body-style="{ padding: '20px' }">
        <template #header>
            <div class="card-header">


                <el-input v-model="likename" style="max-width: 300px;margin-left: 12px;" placeholder="请输入查询条件"
                    class="input-with-select">
                    <template #append>
                        <el-button type="primary" @click="getUsers()">查询</el-button>
                    </template>
                </el-input>
            </div>
        </template>

        <el-table :data="tableData" table-layout='auto' style="width: 100%" height="250" >
            
            <el-table-column prop="userId" label="编号" width="80" />
            <el-table-column prop="path" label="头像" width="80">
                <template #default="{ row }">
                    <el-avatar :src="imgBaseURL + row.path" />
                </template>
            </el-table-column>
            <el-table-column prop="userName" label="姓名" width="120" />
            <el-table-column prop="sex" label="性别" width="60" />
            <el-table-column prop="phone" label="手机" width="120" />
            <el-table-column prop="birthday" label="出生日期" width="140">
                <!-- 插槽 -->
                <template #default="{ row }">
                    <div style="display: flex; align-items: center">
                        <el-icon>
                            <timer />
                        </el-icon>
                        <span style="margin-left: 10px">{{ row.birthday.substr(0, 10) }}</span>
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="deptName" label="部门" width="80" />
            <el-table-column prop="roleName" label="角色" width="80" />
            <el-table-column prop="status" label="状态" width="70">
                <template #default="{ row }">
                    <el-switch v-model="row.status"
                        style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" inline-prompt disabled
                        :active-icon="Check" :inactive-icon="Close" />
                </template>
            </el-table-column>
        </el-table>

        


        <template #footer>
            <el-pagination v-model:current-page="page" v-model:page-size="size" :page-sizes="[2, 5, 10, 20, 50]"
                layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
                @current-change="handleCurrentChange" />
        </template>
    </el-card>



</template>


<style scoped>
.highlight {
    font-weight: 600;
    font-size: 16px;
    color: #ffffff;
    animation: glow 666ms infinite alternate;
}

@keyframes glow {
    form {
        text-shadow:
            0 0 10px #1877f2,
            0 0 20px #1459b3,
            0 0 30px #179bff;
    }


    to {
        text-shadow:
            0 0 5px #1877f2,
            0 0 10px #1459b3,
            0 0 15px #179bff;
    }
}

.demo-form-inline .el-form-item {
    margin-bottom: 0px;
}


</style>